<!DOCTYPE html>
<html>
  <head>
    <title>Vue事件对象使用</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      #app {
        padding: 20px;
        font-family: Arial, sans-serif;
      }
      button {
        margin: 10px 0;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #0056b3;
      }
      p {
        margin: 10px 0;
        font-size: 14px;
        color: #333;
      }
      .info {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        border-left: 4px solid #007bff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>事件对象使用演示</h2>
      <button @click="handleClick">点击获取事件信息</button>
      <div class="info">
        <p>点击位置：{{ position }}</p>
        <p>事件类型：{{ eventType }}</p>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue;

      createApp({
        setup() {
          const position = ref('');
          const eventType = ref('');

          const handleClick = (event) => {
            position.value = `X: ${event.clientX}, Y: ${event.clientY}`;
            eventType.value = event.type;
            console.log('事件对象：', event);
          };

          return {
            position,
            eventType,
            handleClick
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>